<template>
	<view class="position">
		<map style="width: 100%; height: 428upx;" @tap="onMap" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		<!-- 地址输入 -->
		<view class="ps-enter">
			<view class="et-left">
				<picker mode="selector" :range="areaList" @change="onPicker" :value="1">
					<view>{{areaList[areaValue]}}<text class="iconfont">&#xe627;</text></view>
				</picker>
			</view>
			<view class="et-right">
				<view class="rt-box">
					<text class="iconfont">&#xe62e;</text>
					<input type="text" maxlength="10" v-model="inputText" placeholder="中海怡翠山庄" placeholder-class="place-input"/>
				</view>
			</view>
		</view>
		<!-- 地址列表 -->
		<view class="address-current">
			<view class="ac-line1">
				当前地址
			</view>
			<view class="ac-line2">
				<view class="one">
					赛格ECO中心5栋
				</view>
				<view class="two">
					龙岗区布吉布龙路20号
				</view>
			</view>
		</view>
		
		<!-- 附近地址 -->
		<view class="address-current">
			<view class="ac-line1">
				附近地址
			</view>
			<view class="ac-line2">
				<view class="one">
					中海怡翠山庄56栋
				</view>
				<view class="two">
					龙岗区布吉布龙路20号
				</view>
			</view>
			<view class="ac-line2">
				<view class="one">
					中海怡翠山庄57栋
				</view>
				<view class="two">
					龙岗区布吉布龙路20号
				</view>
			</view>
			<view class="ac-line2">
				<view class="one">
					中海怡翠山庄57栋
				</view>
				<view class="two">
					龙岗区布吉中海怡翠社区布龙路中海怡翠山庄
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				areaValue: 0,
				areaList: ['龙岗区','龙华区'],
				positionName: '赛格ECO',
				LL: {},
				// 114.1078782036354,"latitude":22.62401682570172} 
				latitude: 22.62401682570172,
				longitude: 114.1078782036354,
				covers: [{
					latitude: 22.62401682570172,
					longitude: 114.1078782036354,
					iconPath: '/static/imgs/shopDetails/btn_02.png',
					callout: {
						content: '深圳市布吉上水径一街', //文本
						color: '#333333', //文本颜色
						fontSize: 12,
						anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
						anchorY: 0, //label的坐标，原点是 marker 对应的经纬度 
						// x:39.909,//这个组件微信在1.2.0以后就废弃了
						// y:116.39742,
						bgColor: '#ffffff', //背景色
						padding: 5, //文本边缘留白
						borderWidth: 1, //边框宽度
						// borderColor:'#D84C29',//边框颜色							
						textAlign: 'conter', //文本对齐方式。
						borderRadius: 5,
					},
				}
			]
	};
	},
	onLoad() {
			this.getLL()
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$common.hideCenterIcon();
			// #endif
		},
		methods: {
			onPicker(e){
				this.areaValue = e.detail.value
				console.log(e)
			},
			
			onMap(e) { //点击地图触发
				console.log(e)
			},
			async getLL() { // 获取地理位置
				this.LL = await this.$common.getLL()
				console.log(this.LL)
			},
			name() {
				// name
				uni.setStorageSync('cityName', this.positionName)
			}
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/doenCommon.scss';
</style>
